<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">用户注册</div>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input v-model="param.username" placeholder="nickname">
                        <el-button slot="prepend" >昵称:</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="telephone">
                    <el-input v-model="param.telephone" placeholder="telephone">
                        <el-button slot="prepend" >电话:</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="sex">
                    <el-select v-model="param.sex" placeholder="请选择性别" style="width: 100%;">
                        <el-option key="boy" label="男" value="男"></el-option>
                        <el-option key="girl" label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="birthday">
                    <el-col :span="11" style="width: 100%;">
                        <el-date-picker
                                type="date"
                                placeholder="选择生日"
                                v-model="param.birthday"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"
                        ></el-date-picker>
                    </el-col>

                </el-form-item>
                <el-form-item prop="address">
                    <el-input v-model="param.address" placeholder="address">
                        <el-button slot="prepend" >地址:</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="param.password" placeholder="password">
                        <el-button slot="prepend" >密码:</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="otpCode" >
                    <el-col :span="13">
                        <el-input v-model="param.otpCode" placeholder="otpCode" maxlength="6" >
                            <el-button slot="prepend" >验证码:</el-button>
                        </el-input>
                    </el-col>
                    <div class="getOtpCode-btn">
                        <el-button type="primary" @click="getOtpCode()" v-show="show">获取验证码</el-button>
                        <el-button type="primary" v-show="!show" disabled="disabled">{{count}}秒后重新发送</el-button>
                    </div>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()">注册</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import qs from 'qs';
    export default {
        data: function() {
            return {
                regist(){
                    this.$router.push('/user_register');
                },
                count:'',
                timer:null,
                show:true,
                param: {
                    username: '',
                    telephone:'',
                    sex:'',
                    birthday:'',
                    address:'',
                    password:'',
                    otpCode:'',
                },
                rules: {
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    telephone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
                    sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
                    birthday: [{ required: true, message: '请选择出生日期', trigger: 'blur' }],
                    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                    otpCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
                },
            };
        },
        methods: {
            submitForm() {
                this.$refs.login.validate(valid => {
                    if (valid) {
                        // console.log(this.param);
                        // this.$message.success('注册成功');
                        var data = qs.stringify(this.param);
                        axios.post('http://localhost:8083/user/register',data,{
                            // this.param.telephone,{
                            headers: {
                                'Access-Control-Allow-Origin':'http://localhost:8083',  //解决cors头问题
                                //         'Access-Control-Allow-Credentials':'true', //解决session问题
                                //         'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' //将表单数据传递转化为form-data类型
                            },
                        }).then((res)=>{
                            console.log(res);
                            //if (res.data == "success") {
                            this.$message.success('注册成功');
                            localStorage.setItem('telephone', this.param.telephone);
                            this.$router.push('/u_login_index');
                            //} else {
                            //this.$message.error('注册失败，原因为1' + res.data.errMsg);
                            //}
                        }).catch((err)=>{
                            console.log(err);
                            this.$message.error('注册失败，短信验证码错误或手机号已被注册');
                            return false;
                        });
                    } else {
                        this.$message.error('请完善信息');
                        console.log('error submit!');
                        return false;
                    }
                });
            },
            getOtpCode() {
                let telephone = this.param.telephone;
                if (telephone == null || telephone == "") {
                    // window.alert("请输入手机号！");
                    this.$message.error("请输入手机号！");
                    return false;
                } else {
                    var data = qs.stringify({"telephone":this.param.telephone});
                }
                axios.post('http://localhost:8083/user/getOtp',data,{
                    // this.param.telephone
                    //     headers: {
                    //         // 'Access-Control-Allow-Origin':'*',  //解决cors头问题
                    //         'Access-Control-Allow-Credentials':'true', //解决session问题
                    //         'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' //将表单数据传递转化为form-data类型
                    //     },
                },{
                    xhrfields: {
                        withCredentials: true,
                    }
                }).then((res)=>{
                    console.log(res);
                    this.$message.success('Otp验证码已经发送到您的手机上');
                    // window.alert("Otp验证码已经发送到您的手机上");
                    // if (res.status == "success") {
                    //     window.alert("Otp验证码已经发送到您的手机上");
                    //     //axios是异步发起，若发起后页面刷新，那么就会丢失当前进程，导致接收不到！
                    //     //解决方法1：不使用form标签
                    // } else {
                    //     window.alert("Otp验证码发送失败，原因为" + res.data.errMsg);
                    // }

                }).catch((err)=>{
                    console.log(err);
                    this.$message.error('Otp验证码发送失败，原因为' + data.responseText);
                    //window.alert("Otp验证码发送失败，原因为" + data.responseText);
                });
                const num = 60;
                if (!this.timer) {
                    this.count = num;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= num) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000);
                }

            }
        },
    }
</script>

<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/login-bg.jpg);
        /*background-image: url(../../assets/img/甜品店1.jpg);*/
        background-size: 100%;
    }
    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }
    .ms-login {
        position: absolute;
        left: 50%;
        top: 45%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }
    .ms-content {
        padding: 30px 30px;
    }
    .getOtpCode-btn {
        text-align: right;
    }
    .login-btn {
        text-align: center;
    }
    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }
    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }
</style>
